iT邦幫忙

2021 iThome 鐵人賽

DAY 17
0

路由導覽v1

Flutter 的路由是透過 Navigator 以棧的方式管理畫面上的呈現。

Navigator 1.0

  • Navigator:它是一個用來管理路由的組件,提供一個 Overlay 處理棧的內容。
  • Route:這是一個抽象類別,用來定義路由的設定,例如 MaterialPageRoute

使用方式

  • push

將畫面新加到 Navigator 的 stack 上

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) {
    return SomeScreen();
  }),
);
  • pushNamed

使用命名路由的方式創建路由設定,就可以使用名稱的方式進行切換。

Navigator.pushNamed(context, '/time'),
  • pop

將 stack 最後的路由設定從 Navigator 上移除

Navigator.pop(context);

命名路由

使用命名路由的方式在程式架構的維護上會比較清楚

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/time': (context) => TimeScreen(),
        '/text': (context) => TextScreen(),
        '/image': (context) => ImageScreen(),
        '/icon': (context) => IconScreen(),
        '/button': (context) => ButtonScreen(),
        '/form': (context) => FormScreen(),
        '/layout': (context) => LayoutScreen(),
        '/container': (context) => ContainerScreen(),
        '/listview': (context) => ListViewScreen(),
        '/gridview': (context) => GridViewScreen(),
        '/datetimepicker': (context) => DateTimePickerScreen(),
        '/sliver': (context) => SliverScreen(),
      },
    );
  }
}

傳遞參數

push

 Navigator.push(
  context,
  MaterialPageRoute(builder: (context) {
    return SomeScreen(title: "Navigator");
  }),
);

pushNamed

pushNamed 的第三個參數可以接收 Object 型別的 arguments

  static Future<T?> pushNamed<T extends Object?>(
    BuildContext context,
    String routeName, {
    Object? arguments,
   }) {
    return Navigator.of(context).pushNamed<T>(routeName, arguments: arguments);
  }

使用方式

Navigator.pushNamed(context, '/time', DateTime.now())
@override
Widget build(BuildContext context) {
  var args = ModalRoute.of(context)!.settings.arguments;
  ...
}

pop

使用第二參數回傳結果

  @optionalTypeArgs
  static void pop<T extends Object?>(BuildContext context, [ T? result ]) {
    Navigator.of(context).pop<T>(result);
  }

回傳結果

Navigator.pop(context, false);

使用 await 接收 pop 回來的參數資料

var result = await Navigator.pushNamed(context, '/next')

小結

Navigator 1.0 的使用上很直覺,如果你想要切換路由時使用 pushpop 即可,如果使用命名式的路由在維護的管理上會更加統一,也可以使用onGenerateRoute的 hook 進行建構路由設定前的權限檢查。


上一篇
Flutter體驗 Day 16-滾動組件-Sliver
下一篇
Flutter體驗 Day 18-路由導覽v2
系列文
Flutter / Dart 跨平台App開發體驗30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言